import { ConfigProvider, theme, Switch, Card, Button } from 'antd'
import { useState, useEffect } from 'react'
import Home from './view/Home'
import axios from 'axios'

//自写路由
function RouterView() {
  const [path] = useState(location.pathname)
  const getComponent = () => {
    switch (path) {
      case '/':
        return <Home />
      case '/about':
        return <Home />
      default:
        return <>没有这个页面或者文件</>
    }
  }
  return <>{getComponent()}</>
}

export default function App() {
  const [BG, setBG] = useState('')
  const huanBG = () => {
    setBG(BgList[Math.floor(Math.random() * BgList.length)])
  }
  // 请求壁纸
  const [BgList, setBgList] = useState([])
  useEffect(() => {
    axios({
      url: 'http://localhost:5173/bing/hp/api/model'
    }).then((suc) => {
      console.log(suc.data);
      const list = suc.data.MediaContents.map((item) => {
        return `https://cn.bing.com/${item.ImageContent.Image.Wallpaper}`
      })
      setBgList(list)
      setBG(list[0])
    })
  }, [false])
  //显示时间
  const [date, setDate] = useState('')
  setInterval(() => {
    let date = new Date()
    let date2 = `${date.toLocaleTimeString()}`
    setDate(date2)
  }, 1000)
  //主题切换
  const [Sth, setSth] = useState(true)
  const themeConfig = {
    algorithm: Sth ? theme.darkAlgorithm : theme.defaultAlgorithm,
    token: {
      //主题色
      colorPrimary: '#00b96b'
    }
  }
  return (
    <ConfigProvider theme={themeConfig}>
      <div className="app" style={{ backgroundImage: `url(${BG}` }}>
        <Card className="switch" bordered={false}>
          <div className="Title">
            <img
              style={{ height: '30px', width: '30px' }}
              src="https://mp-faf1c5bd-4804-4d15-90f2-021e39fb4618.cdn.bspapp.com/cloudstorage/55022d1d-07f7-4f66-ba87-9343b87a5986.svg"
              alt=""
            />
            <span>{date}</span>
            <div className="right">
              <Switch
                size="small"
                checked={Sth}
                onChange={(e) => {
                  setSth(e)
                }}
              />
              &nbsp;&nbsp;
              <Button size="small" onClick={huanBG}>
                换壁纸
              </Button>
            </div>
          </div>
        </Card>
        <RouterView />
      </div>
    </ConfigProvider>
  )
}
